<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Mixin</title>
</head>
<body>
<script src="../../js/react/react.js"></script>
<script src="../../js/react/react-dom.js"></script>
<script src="../../js/react/react-with-addons.js"></script>
<script src="../../js/react/browser.min.js"></script>
    <script type="text/babel">
        // var BindingExample = React.createClass({
        //     getInitialState: function() {
        //         return {
        //             text: ''
        //         }
        //     },
        //     handleChange: function(event) {
        //         this.setState({text: event.target.value})
        //     },
        //     render: function() {
        //         return <div>
        //             <input type="text" placeholder="请输入内容" onChange={this.handleChange} />
        //             <p>{this.state.text}</p>
        //         </div>
        //     }
        // })
//        var BindingMixin = {
//            handleChange: function(key) {
//                var that = this
//                var newState = {}
//                return function(event) {
//
//                    newState[key] = event.target.value
//                    that.setState(newState)
//                }
//            }
//        }
        var BindingExample = React.createClass({
            mixins: [React.addons.LinkedStateMixin],
            getInitialState: function() {
                return {
                    text: '',
                    comment: '',
                }
            },
            render: function() {
                return <div>
                    <input type="text" placeholder="请输入内容" valueLink={this.linkState('text')} />
                    <textarea valueLink={this.linkState('comment')}></textarea>
                    <p>{this.state.text}</p>
                    <p>{this.state.comment}</p>
                </div>
            }
        })
        React.render(<BindingExample></BindingExample>, document.body);
    </script>
</body>
</html>
